<!DOCTYPE html>
<html class="x-admin-sm">

    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a><cite>账号管理</cite></a>
                <a href="">运营账号信息</a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">

                <div class="layui-col-md12">

                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  placeholder="登录名" name="userId" id="userId">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  placeholder="用户名" name="userName" id="userName">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  placeholder="手机号码" name="phone" id="phone">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn"  lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-header">
                            <button class="layui-btn" onclick="addUser()">
                                <i class="layui-icon"></i>添加</button></div>
                        <div class="layui-card-body ">
                        <table id="demo" class="layui-table layui-form" lay-filter="demo"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        function addUser(){
            var permission = sessionStorage.getItem("permission");
            if(permission == '3')
                xadmin.open('添加用户','./admin-add.html',500,400)
            else layer.msg("权限不足")
        }
    </script>
    <script type="text/html" id="bar">
              <a class="layui-btn layui-btn-xs" id="" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
  <script>
        layui.use(['table','form'], function(){
          var table = layui.table;
          table.render({
            elem: '#demo'
            ,id: 'list'
            ,dateType: "json"
            ,contentType: "application/json"
            ,method: 'post'
            ,url: '/admin/list'
            ,cols: [[ //标题栏
               {field: 'id', title: 'ID', sort: true}
              ,{field: 'loginId', title: '账号'}
              ,{field: 'userName', title: '用户名'}
              ,{field: 'password', title: '密码',
                      templet:function(data) {
                          var permission = sessionStorage.getItem("permission");
                          if(permission == '3')
                              return data.password;
                          else
                              return '********';
                      }
                  }
              ,{field: 'createTime', title: '创建时间'}
              ,{field: 'updateDate', title: '更新日期'}
              ,{field: 'phone', title: '手机号码'}
              ,{fixed: 'right', title:'操作', toolbar: '#bar'}
            ]]
              ,parseData: function(res){ //res 即为原始返回的数据
                  var dataT = res.data.adminList;
                  for(let i = 0 ; i < dataT.length; i++) {
                      if(dataT[i].createTime != null && dataT[i].createTime != null && dataT[i].createTime.length >= 10) {
                          dataT[i].createTime = dataT[i].createTime.substring(0, 10);
                      }
                      if(dataT[i].updateDate != null && dataT[i].updateDate != null && dataT[i].updateDate.length >= 10) {
                          dataT[i].updateDate = dataT[i].updateDate.substring(0,10);
                      }
                  }
                return {
                   "code": 0,
                   "count": res.dataSize, //解析数据长度
                   "data": res.data.adminList //解析数据列表
                };
              }
              ,skin: 'row' //表格风格
              ,even: true
              ,page: true
              ,limit: 6
              ,limits: [6,10,20]
              ,done : function(res, curr, count){
                  table_data=res.data;
                  layer.closeAll('loading');
               }
            });

        var form = layui.form;
            form.on('submit(search)', function(data){
                layer.load();
                table.reload('list', {
                    page: {
                      curr: 1 //重新从第 1 页开始
                    }
                    ,where:{
                      'loginId' : data.field.userId.trim() != "" ? data.field.userId.trim() : null,
                      'userName' : data.field.userName.trim() != "" ? data.field.userName.trim(): null,
                      'phone' : data.field.phone.trim() != "" ? data.field.phone.trim() : null
                    }
                 }); 
                 return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
             });

        //监听行工具事件
        table.on('tool(demo)', function(obj){
          var data = obj.data;
          //console.log(data)
            var permission = sessionStorage.getItem("permission");
          if(obj.event === 'del'){
              if (permission == '3') {
                    layer.confirm('真的删除么？', function(index){
                       $.ajax({
                           url:"/admin/deleteOne",
                           method: "get",
                           data:{
                               'id' : data.id
                           },
                           success: function (res) {
                                if (res.msg == "success") {
                                    layer.msg("删除成功!");
                                } else {
                                    layer.msg('删除失败!');
                                }
                                table.reload('list',{
                                    page: {curr: 1}
                                });
                            }
                        })
                        layer.close(index);
                    });
              } else {
                  layer.msg("权限不足");
              }
          } else if(obj.event === 'edit') {
              if (permission == '3') {
                  xadmin.open('编辑', 'admin-edit.html?userId=' + data.id + '&name=' + data.userName + '&psw=' + data.password + '&phone=' + data.phone, 550, 450);
              } else {
                  layer.msg("权限不足");
              }
          }
        });
});
</script>
</html>